<template>
  <!-- 替换原生滚动条 -->
  <el-scrollbar ref="my_scroll" id="my-scroll">
    <div class="common-layout">
      <el-container>

        <!-- MallHeader -->
        <el-affix>
          <el-header>
            <mall-header />
          </el-header>
        </el-affix>

        <!-- Main -->
        <el-main>
          <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
          <router-view />
          <!-- <router-view v-slot="{ Component }">
          <transition name="el-fade-in" mode="out-in">
            <div :key="Component">
              <component :is="Component" />
            </div>
          </transition>
        </router-view> -->
        </el-main>

        <!-- MallFooter -->
        <el-footer>
          <mall-footer />
        </el-footer>

      </el-container>
    </div>
  </el-scrollbar>
</template>

<script setup>
import MallHeader from '../../components/MallHeader.vue';
import MallFooter from '../../components/MallFooter.vue';
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex';

const store = useStore();
const my_scroll = ref();

onMounted(() => {
  store.commit('updateMallMainScrollBarRef', my_scroll);
})
</script>

<style lang="less" scoped>
.el-header {
  padding: 0;
}

.el-main {
  padding: 0;
}
</style>